<template>
	<view class="container">
		<view class="back-icon" @click="goToLogin">
			<text><</text>
		</view>

		<view class="page-title">组件列表</view>

		<view class="components-list">
			<view>
				<view class="smart-container">1.容器</view>
				<view class="smart-panel-title" @click="goDetailPage('view')"><text>view视图</text></view>
			</view>
			<view>
				<view class="smart-container">2.基础内容</view>
				<view class="smart-panel-title" @click="goDetailPage('text')"><text>text文本编辑</text></view>
				<view class="smart-panel-title" @click="goDetailPage('icon')"><text>icon图标</text></view>
			</view>
			<view>
				<view class="smart-container">3.表单组件</view>
				<view class="smart-panel-title" @click="goDetailPage('button')"><text>button按钮</text></view>
				<view class="smart-panel-title" @click="goDetailPage('checkbox')"><text>checkbox多选框</text></view>
				<view class="smart-panel-title" @click="goDetailPage('label')"><text>label标签组件</text></view>
				<view class="smart-panel-title" @click="goDetailPage('input')"><text>input输入框</text></view>
				<view class="smart-panel-title" @click="goDetailPage('textarea')"><text>textarea多行文本输入框</text></view>
				<view class="smart-panel-title" @click="goDetailPage('form')"><text>form表单</text></view>
			</view>
			<view>
				<view class="smart-container">4.导航组件</view>
				<view class="smart-panel-title" @click="goDetailPage('navigator')"><text>navigator</text></view>
			</view>	
			<view>
				<view class="smart-container">5.组件</view>
				<navigator url="/pages/Custom/cardViewPage/cardViewPage" class="smart-panel-title">卡片组件</navigator>
				<navigator url="/pages/Custom/NewListPage/NewListPage" class="smart-panel-title">新闻组件</navigator>
				<navigator url="/pages/index/index" class="smart-panel-title">组件传值示例</navigator>
			</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		// onLoad() {
		// 	if (!uni.getStorageSync('token')) {
		// 		uni.redirectTo({ url: '/pages/login/login' })
		// 	}
		// },
		methods: {
			goDetailPage(componentName) {
				uni.navigateTo({
					url: `/pages/components/${componentName}/${componentName}`
				})
			},

			goToLogin() {
				console.log('点击返回按钮，准备跳转到登录页');
				uni.redirectTo({
					url: '/pages/login/login', 
					fail: (err) => {
						console.error('跳转失败原因：', err);
						uni.showToast({ title: '跳转失败，请检查路径', icon: 'none' });
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		padding: 20rpx;
		background-color: #f5f5f5;
		position: relative; 
	}

	.back-icon {
		position: absolute;
		left: 10rpx; 
		top: 10rpx;  
		width:70rpx; 
		height: 60rpx; 
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40rpx;
		color: #333;
		z-index: 9999; 
		background-color: rgba(255, 255, 255, 0.7);
		border-radius: 8rpx;
	}

	.page-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin: 80rpx 0 40rpx; 
	}

	.components-list {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		position: relative;
		z-index: 1; 
	}

	.smart-container {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin: 30rpx 0 15rpx;
		padding-left: 10rpx;
		border-left: 6rpx solid #007aff;
	}

	.smart-panel-title {
		font-size: 28rpx;
		color: #666;
		padding: 20rpx;
		margin: 10rpx 0;
		background-color: #f9f9f9;
		border-radius: 8rpx;
		cursor: pointer;
	}

	.smart-panel-title:active {
		background-color: red;
	}
</style>